import React,{Component} from "react";
import {TabBar} from "antd-mobile";
import PropTypes from 'prop-types'
import {withRouter} from "react-router-dom";

import './navfooter.css'
const Item = TabBar.Item
//底部导航不是路由组件，但是需要使用库路由的api，这时就需要使用withRoute
class NavFooter extends Component{
    static propTypes = {
        navList : PropTypes.array.isRequired,
        unReadcount:PropTypes.number.isRequired
    }

    render() {
        //只有路由组件才可以获取path，这时就需要withRouter
        const path = this.props.location.pathname
        //需要对数组中的元素进行过滤，所以不能设置const
        let {navList,unReadcount} =this.props
        //过滤掉hiddern为true的
        navList = navList.filter(nav=>nav.hidden==false)
        //测试
        console.log("这是传过来筛选的navlist",navList)
        return(
                 <TabBar>
                     {
                         navList.map((nav)=><Item
                            key = {nav.path}
                            badge={nav.path==='/message'?unReadcount:0}
                            title={nav.text}
                            icon={{uri:require("./images/"+nav.icon+".png")}}
                            selectedIcon={{uri:require("./images/"+nav.icon+"-selected.png")}}
                            selected={path===nav.path}
                            onPress={()=>this.props.history.replace(nav.path)}
                         />)
                     }
                 </TabBar>

        )
    }
}
//内部会会向组件传入一些路由组件的特有属性：history/location/math
export default withRouter(NavFooter)